.con {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    text-align: center;
    line-height: .5rem;
    height: .5rem;
    background: #fff;
    box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, .06), 0 0 6px 0 rgba(0, 0, 0, .02);
    font-size: .16rem;
  }

  main {
    flex: 1;
    overflow-y: auto;

    .serve {
      height: .4rem;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        flex: 1;
        color: #666;
        font-size: .12rem;
        text-align: center;

        span {
          color: red;
          margin-right: .07rem;
          font-size: .15rem;
        }
      }
    }

    .msg {
      padding: .2rem;

      .koa {
        display: flex;
        align-items: center;
        line-height: .4rem;
        background: #dcdfe6;
        margin-top: .1rem;

        p:nth-child(1) {
          width: 1rem;
          color: grey;
          padding: 0 .1rem;
          font-size: .16rem;
          text-align: center;
        }

        p:nth-child(2) {
          flex: 1;
          font-size: .15rem;
          line-height: .3rem;
          padding: 0 .1rem;
        }
      }
    }

    .thro {
      color: rgb(10, 177, 243);
    }

    .problem {
      padding: .2rem;

      div {
        margin-bottom: .1rem;

        p:nth-child(1) {
          font-size: .16rem;
          line-height: .3rem;

          span {
            color: red;
            margin-right: .1rem;
          }
        }
      }
    }

    .relate {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      dl {
        width: 49.9%;
        display: flex;
        flex-direction: column;
        margin-top: .01rem;
        background-color: #fff;

        dt {
          img {
            width: 100%;
            height: 1.67rem;
          }
        }

        dd {
          text-align: center;

          p:nth-child(2) {
            color: red;
            margin-top: .1rem;
          }
        }
      }
    }
  }

  footer {
    width: 100%;
    height: .5rem;
    background: #fff;
    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .2);
    display: flex;
    z-index: 99999;
    p {
      height: .5rem;
      line-height: .5rem;
      text-align: center;
    }

    p:nth-child(1) {
      width: 20%;
      font-size: .24rem;
    }

    p:nth-child(2) {
      width: 20%;
      color: rgb(10, 177, 243);

      i {
        font-size: .24rem;
      }
    }

    p:nth-child(3) {
      flex: 1;
      background: linear-gradient(90deg, #ff9500, #ff5e3a)
    }

    p:nth-child(4) {
      flex: 1;
      background: linear-gradient(90deg, #1d62f0, #19d5fd);
    }
  }
}
